<template>
  <div class="SongSing">
    <div class="head">
      <!-- 头部返回 -->
      <van-nav-bar
        title="歌单广场"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      >
        <template #right>
          <span @click="onRankList" class="iconfont icon-paihangbang"></span>
        </template>
      </van-nav-bar>
    </div>
    <main>
      <!-- 轮播图 -->
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in banners" :key="item.id">
          <img :src="item.pic" alt="" srcset="" />
        </el-carousel-item>
      </el-carousel>
      <!-- 歌单 -->
      <van-grid :border="false" :column-num="3">
        <van-grid-item v-for="item in Songlist" :key="item.id">
          <van-image @click="togedan(item.id)" :src="item.coverImgUrl" />
          <p>{{ item.name }}</p>
        </van-grid-item>
      </van-grid>
      <div class="wuyong"></div>
    </main>
  </div>
</template>

<script>
import { BannerAPI, SongAPI } from "../services/SongSing";
export default {
  data() {
    return {
      banners: [],
      Songlist: [],
      SongDetaillist: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        name: "Home",
      });
    },
    togedan(id) {
      this.$router.push({
        name: "TJGD",
        query: { id },
      });
    },
    onRankList() {
      this.$router.push({
        name: "RankList",
      });
    },
  },
  async created() {
    const resBanner = await BannerAPI;
    this.banners = resBanner.banners;
    const resSong = await SongAPI;
    this.Songlist = resSong.playlists;
    this.Songlist = this.Songlist.slice(15, 30);
  },
};
</script>

<style scoped>
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.wuyong {
  height: 40px;
}
img {
  height: 100%;
}
</style>
